<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useUserStore } from '@/stores/user'
import { useRouter, useRoute } from 'vue-router'
import { workGetDetail } from '@/api/interface/web/work'
import { ElMessage } from 'element-plus'
import { workMessageAdd } from '@/api/interface/web/workMessage'
import { Back } from '@element-plus/icons-vue'

const fullscreenLoading = ref(false)

const userStore = useUserStore()

const router = useRouter()

const route = useRoute()

const { id, type } = route.query

const workDetail: any = ref({})
const workGetDetailFun = () => {
  workGetDetail({ id }).then((res: any) => {
    workDetail.value = res
  })
}
workGetDetailFun()

const content: any = ref()
const keyDownCode = ref(0)
const keyDownEnter = (e: any) => {
  keyDownCode.value = e.keyCode // 将按键代码赋值给 keyDownCode
  e.preventDefault() // 阻止默认行为
}

// 键盘抬起事件处理函数
const keyUpEnter = (e: any) => {
  if (keyDownCode.value === 229) {
    // 如果 keyDownCode 的值为 229，则说明输入法正在处理输入
    return
  }
  e.preventDefault() // 阻止默认行为
  handleSend() // 调用 send 函数
}

const handleSend = () => {
  if (fullscreenLoading.value) {
    return
  }

  if (content.value.trim() === '') {
    ElMessage.error('请输入你的问题!')
    return
  }

  fullscreenLoading.value = true
  workMessageAdd({
    workId: id,
    content: content.value,
    type: type || 'ask',
  })
    .then(() => {
      ElMessage.success('添加成功!')
      workGetDetailFun()
      content.value = ''
    })
    .finally(() => {
      fullscreenLoading.value = false
    })
}

const goBack = () => {
  router.go(-1)
}

onMounted(() => {
  if (!userStore.userInfo) {
    router.push('/home')
    return
  }
})
</script>

<template>
  <BasePage v-loading.fullscreen="fullscreenLoading">
    <template #title>
      <div class="work-message-title-box">
        <el-icon style="margin-right: 10px" :size="20" @click="goBack"><Back /></el-icon>
        <div class="text">{{ workDetail.title }}</div>
      </div>
    </template>
    <div class="message-box">
      <div class="message-item-box">
        <div
          :class="['message-item', item.type]"
          v-for="(item, index) in workDetail.message"
          :key="index"
        >
          <div class="time">{{ item.createTime }}</div>
          <div class="content">{{ item.content }}</div>
        </div>
      </div>

      <div class="answer-box">
        <el-input
          v-model="content"
          type="textarea"
          :rows="2"
          maxlength="200"
          placeholder="输入工单内容,shift+enter换行"
          :disabled="fullscreenLoading"
          @keydown.enter.exact="keyDownEnter"
          @keyup.enter.exact="keyUpEnter"
        />
        <div
          :class="{
            'answer-btn': true,
            disabled: fullscreenLoading,
          }"
          @click="handleSend"
        >
          回复
        </div>
      </div>
    </div>
  </BasePage>
</template>
<style lang="scss" scoped>
.work-message-title-box {
  display: flex;
  align-items: center;

  .el-icon {
    cursor: pointer;
  }
}

.message-box {
  width: 100%;
  height: 100%;
  padding-top: 30px;
  display: flex;
  flex-direction: column;

  .message-item-box {
    flex: 1;
    overflow-y: auto;

    .message-item {
      margin-bottom: 20px;
      .time {
        font-size: 14px;
        color: rgb(156 163 175);
        margin-bottom: 10px;
      }

      .content {
        padding: 10px 15px;
        color: rgb(51, 54, 57);
        background-color: rgb(248 249 250);
        border-radius: 5px;
        display: inline-block;
        width: auto;
        max-width: 40%;
        height: auto;
        line-height: 1.5em;
      }
    }

    .message-item.answer {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
  }

  .answer-box {
    display: flex;
    align-items: center;
    width: 100%;
    height: 45px;
    margin-top: 15px;

    :deep(.el-textarea) {
      flex: 1;
      height: 45px;

      .el-textarea__inner {
        height: 45px;
        box-shadow: none;
        border: 1px solid #dcdfe6;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    .answer-btn {
      width: 60px;
      height: 45px;
      background-color: rgba(49, 108, 114, 1);
      font-size: 18px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      &.disabled {
        cursor: not-allowed;
      }
    }
  }
}
</style>
